<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <script src="https://unpkg.com/axios/dist/axios.min.js"></script>
</head>

<body>
    <!-- <div class="container">
        <button>get</button>
        <button>post</button>
        <button>put</button>
        <button>delete</button>
    </div>
    <script>
        const btns = document.querySelectorAll('button');
        //get
        btns[0].onclick = function() {
                axios({
                    method: 'GET',
                    url: 'http://localhost:3000/posts/2'
                }).then(res => {
                    console.log(res);
                })
            }
            //post
        btns[0].onclick = function() {
                axios({
                    method: 'POST',
                    url: 'http://localhost:3000/posts/2'
                }).then(res => {
                    console.log(res);
                })
            }
            //put
        btns[0].onclick = function() {
                axios({
                    method: 'PUT',
                    url: 'http://localhost:3000/posts/2'
                }).then(res => {
                    console.log(res);
                })
            }
            //delete
        btns[0].onclick = function() {
            axios({
                method: 'DELETE',
                url: 'http://localhost:3000/posts/2'
            }).then(res => {
                console.log(res);
            })
        }
    </script> -->
    <!-- <div class="container">
        <button>get</button>
        <button>post</button>
    </div>
    <script>
        const btns = document.querySelectorAll('button');
        //创建实例对象
        const duanzi = axios.create({
            baseURL: 'https://api.apiopen.top',
            timeout: '2000'
        })
        duanzi.get({
            url: 'getJoke'
        }).then(res => {
            console.log(res);
        })
    </script> -->
    <!-- <script>
        // axios.interceptors.request.use(function(config) {
        //     //请求拦截成功
        //     console.log('请求拦截成功1');
        //     console.log(config);

        //     return config
        // }, function(error) {
        //     //请求拦截器失败
        //     console.log('请求拦截失败1');
        //     return Promise.reject(error)
        // })
        // axios.interceptors.request.use(function(config) {
        //     //请求拦截成功
        //     console.log('请求拦截成功2');
        //     return config
        // }, function(error) {
        //     //请求拦截器失败
        //     console.log('请求拦截失败2');
        //     return Promise.reject(error)
        // })

        // axios.interceptors.response.use(function(response) {
        //     //请求拦截成功
        //     console.log('响应拦截成功1');
        //     console.log(response);
        //     return response
        // }, function(error) {
        //     //请求拦截器失败
        //     console.log('响应拦截失败1');
        //     return Promise.reject(error)
        // })
        // axios.interceptors.response.use(function(response) {
        //     //请求拦截成功
        //     console.log('响应拦截成功2');
        //     return response
        // }, function(error) {
        //     //请求拦截器失败
        //     console.log('响应拦截失败2');
        //     return Promise.reject(error)
        // })

        // axios({
        //     method: 'GET',
        //     url: 'http://localhost:3000/posts'
        // }).then(res => {
        //     console.log(res);
        // }).catch(result => {
        //     console.log(result);

        // })
        .container
    </script> -->
    <div class="container">
        <button>发送</button>
        <button>取消</button>
    </div>
    <script>
        const btn = document.querySelectorAll('button')
            //声明全局变量
        let cancel = null;
        if (cancel == c) {

        }
        btn[0].onclick = function() {
            axios({
                method: 'GET',
                url: 'http://localhost:3000/posts',
                //添加配置对象的属性
                cancelToken: new axios.CancelToken(function(c) {
                    //将c的值赋值给cancel
                    cancel = c
                })
            }).then(res => {
                console.log(res);
                cancel = null
            })
        }
    </script>
</body>

</html>